<!--
  文件名: FinancialProjects.vue
  描述: 这是一个数据可视化界面，展示区块链市值最高的四个项目的走势
  作者: 白紫铜
  创建日期: 2024-4-9
-->

<template>
<div>
  <el-container>
    <el-aside style="width: 150px"></el-aside>
    <!-- 主要内容区域 -->
    <el-main class="main">
      <el-row class="row">
        <!-- 添加按钮组 -->
        <el-col :span="24" style="text-align: center;">
          <el-button type="primary" @click="fetchAll('1W')" class="financialButton">1W</el-button>
          <el-button type="primary" @click="fetchAll('1D')" class="financialButton">1D</el-button>
          <el-button type="primary" @click="fetchAll('1H')" class="financialButton">1H</el-button>
        </el-col>
        <el-col>如遇无法显示数据的情况请关闭代理并刷新页面</el-col>
        <div style="margin-top: 50px"></div>
        <!-- 添加图表展示区域 -->
        <el-col :span="24">
          <div ref="chartBTC" style="height: 400px;"></div>
          <div style="margin-top: 50px"></div>
          <div ref="chartETH" style="height: 400px;"></div>
          <div style="margin-top: 50px"></div>
          <div ref="chartBNB" style="height: 400px;"></div>
          <div style="margin-top: 50px"></div>
          <div ref="chartSOL" style="height: 400px;"></div>
        </el-col>
      </el-row>
    </el-main>
    <el-aside style="width: 150px"></el-aside>
  </el-container>
</div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts';
export default {
  name:"FinancialProjects",
  data(){
    return{
      btcData: [],
      ethData: [],
      bnbData: [],
      solData: [],
      chartBTC:"",
      chartETH:"",
      chartBNB:"",
      chartSOL:"",
    }
  },
  created() {
  },
  mounted() {
    this.fetchAll('1W'); // 默认获取一周的数据
  },
  methods:{
    fetchAll(data){
      this.bar=data
      this.fetchBTC(data)
      this.fetchETH(data)
      this.fetchBNB(data)
      this.fetchSOL(data)
    },
    fetchBTC(data){
      axios.get("https://www.upldav.com/api/v5/market/history-index-candles",{
        params:{
          instId:"BTC-USDT",
          bar:data,
          limit:"54"
        }
      }).then(response=>{
        this.btcData=response.data.data.map(item=>({
          timestamp:item[0],
          open: parseFloat(item[1]),
          high: parseFloat(item[2]),
          low: parseFloat(item[3]),
          close: parseFloat(item[4]),
          status: parseFloat(item[5])
        }))
        //渲染图表
        this.renderChart("BTC")
      }).catch(error => {
        console.error('Error fetching BTC data:', error);
      });
    },
    fetchETH(data){
      axios.get("https://www.upldav.com/api/v5/market/history-index-candles",{
        params:{
          instId:"ETH-USDT",
          bar:data,
          limit:"54"
        }
      }).then(response=>{
        this.ethData=response.data.data.map(item=>({
          timestamp:item[0],
          open: parseFloat(item[1]),
          high: parseFloat(item[2]),
          low: parseFloat(item[3]),
          close: parseFloat(item[4]),
          status: parseFloat(item[5])
        }))
        //渲染图表
        this.renderChart("ETH")
      }).catch(error => {
        console.error('Error fetching ETH data:', error);
      });
    },
    fetchBNB(data){
      axios.get("https://www.upldav.com/api/v5/market/history-index-candles",{
        params:{
          instId:"BNB-USDT",
          bar:data,
          limit:"54"
        }
      }).then(response=>{
        this.bnbData=response.data.data.map(item=>({
          timestamp:item[0],
          open: parseFloat(item[1]),
          high: parseFloat(item[2]),
          low: parseFloat(item[3]),
          close: parseFloat(item[4]),
          status: parseFloat(item[5])
        }))
        //渲染图表
        this.renderChart("BNB")
      }).catch(error => {
        console.error('Error fetching BNB data:', error);
      });
    },
    fetchSOL(data){
      axios.get("https://www.upldav.com/api/v5/market/history-index-candles",{
        params:{
          instId:"SOL-USDT",
          bar:data,
          limit:"54"
        }
      }).then(response=>{
        this.solData=response.data.data.map(item=>({
          timestamp:item[0],
          open: parseFloat(item[1]),
          high: parseFloat(item[2]),
          low: parseFloat(item[3]),
          close: parseFloat(item[4]),
          status: parseFloat(item[5])
        }))
        //渲染图表
        this.renderChart("SOL")
      }).catch(error => {
        console.error('Error fetching SOL data:', error);
      });
    },
    renderChart(data) {
      // 销毁之前的图表实例
      if (this.chartBTC&&data==="BTC") {
        this.chartBTC.dispose();
      }
      if (this.chartETH&&data==="ETH") {
        this.chartETH.dispose();
      }
      if (this.chartBNB&&data==="BNB") {
        this.chartBNB.dispose();
      }
      if (this.chartSOL&&data==="SOL") {
        this.chartSOL.dispose();
      }

      // 反转数据
      const reversedDataBTC = this.btcData.slice().reverse()
      const reversedDataETH = this.ethData.slice().reverse()
      const reversedDataBNB = this.bnbData.slice().reverse()
      const reversedDataSOL = this.solData.slice().reverse()
      // 使用 ECharts 渲染图表
      this.chartBTC = echarts.init(this.$refs.chartBTC);
      this.chartETH = echarts.init(this.$refs.chartETH);
      this.chartBNB = echarts.init(this.$refs.chartBNB);
      this.chartSOL = echarts.init(this.$refs.chartSOL);
      const optionBTC = {
        title: {
          text: 'BTC-USDT Price Trend',
          textStyle:{
            color: "#ffffff"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: reversedDataBTC.map(item=>new Date(parseInt(item.timestamp)).toLocaleDateString()),
          axisLabel:{
            color:"#ffffff"
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:"#ffffff"
          },
          min:function (){
            return Math.floor(Math.min(...reversedDataBTC.map(item=>item.low)))
          },
          max:function (){
            return Math.floor(Math.max(...reversedDataBTC.map(item=>item.high)))
          },
        },
        series: [{
          data: reversedDataBTC.map(item =>[item.open,item.close,item.low,item.high]),
          type:'candlestick',
          name:'BTC Price',
          itemStyle: {
            color0: '#ef232a',
            color: '#14b143',
            borderColor0: '#ef232a',
            borderColor: '#14b143'
          }

        }],
        backgroundColor:"#000000"
      };
      if(data==="BTC"){this.chartBTC.setOption(optionBTC);}
      const optionETH = {
        title: {
          text: 'ETH-USDT Price Trend',
          textStyle:{
            color: "#ffffff"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        xAxis: {
          type: 'category',
          data: reversedDataETH.map(item=>new Date(parseInt(item.timestamp)).toLocaleDateString()),
          axisLabel:{
            color:"#ffffff"
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:"#ffffff"
          },
          min:function (){
            return Math.floor(Math.min(...reversedDataETH.map(item=>item.low)))
          },
          max:function (){
            return Math.floor(Math.max(...reversedDataETH.map(item=>item.high)))
          },
        },
        series: [{
          data: reversedDataETH.map(item =>[item.open,item.close,item.low,item.high]),
          type:'candlestick',
          name:'ETH Price',
          itemStyle: {
            color0: '#ef232a',
            color: '#14b143',
            borderColor0: '#ef232a',
            borderColor: '#14b143'
          }

        }],
        backgroundColor:"#000000"
      };
      if(data==="ETH") {
        this.chartETH.setOption(optionETH);
      }
      const optionBNB = {
        title: {
          text: 'BNB-USDT Price Trend',
          textStyle:{
            color: "#ffffff"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: reversedDataBNB.map(item=>new Date(parseInt(item.timestamp)).toLocaleDateString()),
          axisLabel:{
            color:"#ffffff"
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:"#ffffff"
          },
          min:function (){
            return Math.floor(Math.min(...reversedDataBNB.map(item=>item.low)))
          },
          max:function (){
            return Math.floor(Math.max(...reversedDataBNB.map(item=>item.high)))
          },
        },
        series: [{
          data: reversedDataBNB.map(item =>[item.open,item.close,item.low,item.high]),
          type:'candlestick',
          name:'BNB Price',
          itemStyle: {
            color0: '#ef232a',
            color: '#14b143',
            borderColor0: '#ef232a',
            borderColor: '#14b143'
          }

        }],
        backgroundColor:"#000000"
      };
      if(data==="BNB") {
        this.chartBNB.setOption(optionBNB);
      }
      const optionSOL = {
        title: {
          text: 'SOL-USDT Price Trend',
          textStyle:{
            color: "#ffffff"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: reversedDataSOL.map(item=>new Date(parseInt(item.timestamp)).toLocaleDateString()),
          axisLabel:{
            color:"#ffffff"
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:"#ffffff"
          },
          min:function (){
            return Math.floor(Math.min(...reversedDataSOL.map(item=>item.low)))
          },
          max:function (){
            return Math.floor(Math.max(...reversedDataSOL.map(item=>item.high)))
          },
        },
        series: [{
          data: reversedDataSOL.map(item =>[item.open,item.close,item.low,item.high]),
          type:'candlestick',
          name:'SOL Price',
          itemStyle: {
            color0: '#ef232a',
            color: '#14b143',
            borderColor0: '#ef232a',
            borderColor: '#14b143'
          }

        }],
        backgroundColor:"#000000"
      };
      if(data==="SOL") {
        this.chartSOL.setOption(optionSOL);
      }
    }
  }
}
</script>

<style scoped>
.main{
  width: 1050px;
  min-height: calc(100vh - 65px);
  overflow-y: auto;
}
.financialButton{
  background-color: black;
  color: #ffffff;
  border: black;
  border-radius: 0;
}
.financialButton:hover{
  background-color: #606266;
  color: #ffffff;
  border: #606266;
}
.financialButton:focus{
  background-color: black;
  color: white;
  border: black;
}
</style>